<template>
  <div class="saleedit">
    <el-dialog
      title="编辑销售订单"
      :visible.sync="dialogSale"
      append-to-body
      width="75%">
      <div>
        <div class="bank-search mb-20 mr-15">
          <el-button size="medium" type="warning">打印</el-button>
        </div>
        <el-form :model="form" ref="form" size="medium" label-width="110px">
          <el-row :gutter="24" type="flex" justify="start">
            <el-col :span="6">
              <el-form-item label="客户:" prop="client">
                <el-input v-model="form.client" :disabled="true" placeholder="客户">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售人员:" prop="user">
                <el-select v-model="form.user" filterable disabled placeholder="销售人员" style="width: 100%;">
                  <el-option
                    v-for="item in userList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单据日期:" prop="bill_date">
                <el-date-picker
                  v-model="form.bill_date"
                  type="date" disabled
                  format="yyyy-MM-dd"
                  placeholder="单据日期"
                  style="width: 100%;">
                </el-date-picker></el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="单据编号:" prop="billno">
                <el-input v-model="form.billno" :disabled="true" placeholder="单据编号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex" justify="start">
            <el-col :span="6">
              <el-form-item label="联系人:" prop="contact">
                <el-select v-model="form.contact" filterable clearable placeholder="联系人" style="width: 100%;">
                  <el-option
                    v-for="item in contactList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地址:" prop="address">
                <el-input v-model="form.address" placeholder="地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话:" prop="phone">
                <el-input v-model="form.phone" placeholder="电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型:" prop="order_type">
                <el-radio-group v-model="form.order_type">
                  <el-radio :label="0">线上订单</el-radio>
                  <el-radio :label="1">线下订单</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="bank-form">
            <div class="form-item">
              <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                class="table"
                stripe border
                show-summary
                :summary-method="getSummaries"
                :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" width="50" fixed>
                </el-table-column>
                <el-table-column prop="goods" label="商品" width="160" fixed>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="warehouse" label="仓库(批量)" width="100">
                </el-table-column>
                <el-table-column prop="amount" label="数量" width="100">
                </el-table-column>
                <el-table-column prop="sale_price" label="销售单价" width="100">
                </el-table-column>
                <el-table-column prop="discount_rate" label="折扣率(%)" width="100">
                </el-table-column>
                <el-table-column prop="discount" label="折扣额" width="100">
                </el-table-column>
                <el-table-column prop="sale_amount" label="销售金额(元)" width="120">
                </el-table-column>
                <el-table-column prop="produce_date" label="生产日期" width="160">
                </el-table-column>
                <el-table-column prop="indate" label="有效期天数" width="100">
                </el-table-column>
                <el-table-column prop="note" label="备注" width="150">
                </el-table-column>
                <el-table-column label="操作" width="220">
                  <template slot-scope="scope">
                    <el-button type="text" @click="stockSearch(scope.$index,scope.row)">
                      <i class="el-icon-search"></i>商品库存查询
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页-页码 -->
            <div class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
              </el-pagination>
            </div>
          </div>
          <div class="mt-20">
            <el-form-item label="备注信息:" prop="fnote">
              <el-input type="textarea" v-model="form.fnote" disabled placeholder="暂无备注信息"></el-input>
            </el-form-item>
            <el-row :gutter="24" type="flex" justify="start">
              <el-col :span="6">
                <el-form-item label="优惠率:" prop="premium_rate"><span>
                  <el-input-number style="width: 166px;" :min="0" disabled v-model="form.premium_rate" controls-position="right">
                  </el-input-number>%</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="优惠金额:" prop="discount_amount">
                  <el-input v-model="form.discount_amount" disabled placeholder="优惠金额"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="优惠后金额:" prop="after_amount">
                  <el-input v-model="form.after_amount" :disabled="true" placeholder="优惠后金额"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客户承担费用:" prop="client_bear">
                  <el-input v-model="form.client_bear" disabled placeholder="客户承担费用"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" type="flex" justify="start">
              <el-col :span="6">
                <el-form-item label="本次退款:" prop="return_money" v-if="rows.check_status == 5">
                  <el-input v-model="form.return_money" disabled placeholder="本次退款"></el-input>
                </el-form-item>
                <el-form-item label="本次收款:" prop="collect" v-else>
                  <el-input v-model="form.collect" disabled placeholder="本次收款"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="结算账户:" prop="settle_account">
                  <el-select v-model="form.settle_account" filterable disabled placeholder="结算账户" style="width: 100%;">
                    <el-option
                      v-for="item in accountList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="本次欠款:" prop="arrears">
                  <el-input v-model="form.arrears" :disabled="true" placeholder="本次欠款"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
         </el-form>
      </div>
      <goods-stock ref="GoodsStock" :rows="stock_rows"></goods-stock>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSale = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import GoodsStock from '@/components/purchasing-system/GoodsStock';
  export default {
    components: {
      GoodsStock
    },
    name: 'SaleEdit',
    props:{
      rows:{}
    },
    data() {
      return {
        dialogSale: false,
        stock_rows: '', //表格一行的数据
        currentPage: 1, //当前页码
        pagesize: 10,    //每页的数据条数
        tableData: [], //表格数据
        form: {
          client: '',
          user: '',
          bill_date: '',
          billno: '',
          contact: '',
          address: '',
          phone: '',
          order_type: 0,
          note: '',
          premium_rate: '0',
          discount_amount: '0',
          after_amount: '0.00',
          client_bear: '0.00',
          collect: '0.00',
          return_money: '',
          settle_account: '0',
          arrears: ''
        },
        contactList: [
          {value: '0',label: '（空）'},
          {value: '1',label: '小笑话'}
        ],
        userList: [
          {value: '0',label: '张三'},
          {value: '1',label: '李四'}
        ],
        accountList: [
          {value: '0',label: '（空）'},
          {value: '1',label: '多账户'}
        ],
      }
    },
    //深度监听对象
    watch: {
      rows: {
        handler(newval, oldVal) {
          this.form = newval;
          this.tableData = [{
            goods: newval.goods,
            unit: newval.unit,
            warehouse: newval.warehouse,
            amount: newval.amount,
            sale_price: newval.sale_price,
            discount_rate: newval.discount_rate,
            discount: newval.discount,
            sale_amount: newval.sale_amount,
            produce_date: newval.produce_date,
            indate: newval.indate,
            note: newval.note
          }]
        },
        deep: true
      }
    },
    created() {
    },
    methods:{
      //打开对话框
      openSale() {
        this.dialogSale = true;
      },
      // 确定
      save () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('form',this.form)
            console.log('table',this.tableData)
            this.dialogSale = false;
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //商品库存查询
      stockSearch(index, row){
        this.stock_rows = row;
        this.$nextTick(()=>{
          this.$refs.GoodsStock.openStock();
        });
      },

      //表格合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = []; //声明变量
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if(
            column.property == "amount" || column.property == "discount" || column.property == "sale_amount"
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index]+='元';
          } else {
            // sums[index] = '';
          }
        });
        return sums;
      },

      //每页条数改变时触发事件,选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pagesize = val;
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      }
    }
  }
</script>

<style>
</style>
